<template>
	<view class="main-cs">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">{{type==1?"俱乐部":"协会"}}详情</block>
		</cu-custom>
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
			</swiper-item>
		</swiper>
		
		<view class="csinfo">
			<view class="csinfo-m">
				会员:<label class="info-text">{{csinfo.unum}}</label>人<label class="cuIcon-right" :data-csid="csinfo.cs.id" @tap="passusers"></label>
				<navigator v-if="csinfo.iscreate" class="stillchekcu" :url="'/pages/tennis/club_soci/club_users?state=2&csid='+csinfo.cs.id">待审核会员</navigator>
			</view>
			<view class="csinfo-xhx"></view>
			<view>
				地址:<label class="info-text">{{csinfo.cs.address}}</label>
			</view>
			<view class="csinfo-xhx"></view>
			<view>
				管理员:<label class="info-text">{{csinfo.cs.manager_name}}</label><label class="cuIcon-dianhua" @click="call"></label>
			</view>
			<view class="csinfo-xhx"></view>
			<view>
				自有球场:<label class="info-text">{{csinfo.cs.park_num}}</label> <label style="margin-left: 30rpx;"></label>其中顶棚或室内:<label class="info-text">{{csinfo.cs.indoorpark_num}}</label>
			</view>
			<view class="csinfo-xhx"></view>
			<view >
				成立时间:<label class="info-text">{{csinfo.markdate}}</label>
			</view>
			<view class="csinfo-xhx"></view>
			<view>简介</view>
			<view class="info-jj">
				{{csinfo.cs.introduction}}
			</view>
			<view>宗旨</view>
			<view class="info-jj">
				{{csinfo.cs.purpose}}
			</view>
			<view>通告</view>
			<view class="info-jj">
				{{csinfo.cs.tips}}
			</view>
			
			<view v-if="csinfo.iscreate==false && csinfo.isjoin==false">
				<button class="cu-btn bg-blue btn-join" @click="join_cs">申请加入</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			
			this.userid=uni.getStorageSync("uid");
			this.openid=uni.getStorageSync('openid');
			this.csid=option.id;
			
		},
		onShow() {
			uni.showLoading({
				title:'加载中...'
			})
			uni.request({
				url:"https://www.52tennis.cn/Club_Soci/GetClub",
				data: {
					id:this.csid,
					uid:this.userid
				},
				success:(data)=> {
					if(data.data.result==1){
						this.csinfo=data.data.returnjson;
						this.type=this.csinfo.cs.type;
						
						let csurl = this.csinfo.cs.imgurl;
						if(csurl!=null && csurl.length>0){
							this.swiperList=[];
							let csurls = csurl.split(";");
							console.log(this.websiteUrl);
							for(let i=0;i<csurls.length;i++){
								this.swiperList.push({"id":i,"type":"image","url":this.websiteUrl+csurls[i]})
							}
						}
						
					}else{
						uni.showToast({
							title: '数据错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
				complete: () => {
					uni.hideLoading()
				}
			})
		},
		data() {
			return {
				userid:"",
				openid:"",
				type:2,
				cardCur: 0,
				dotStyle: false,
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}],
				csinfo:{},
			}
		},
		methods: {
			passusers(e){
				
				if(this.userid.length<=0 || this.openid.length<=0){
					uni.showModal({
					    title: '登陆提示',
					    content: '您暂未登陆,是否马上登陆',
					    success: function (res) {
					        if (res.confirm) {
					           uni.navigateTo({
									url:"/pages/tennis/user/index"
					           })
					        } else if (res.cancel) {
					           
					        }
					    }
					});
				}else{
					let csid= e.currentTarget.dataset.csid;
					uni.navigateTo({
						url:"/pages/tennis/club_soci/club_users?state=1&csid="+csid
					})
				}
				
				
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			call(e){
				uni.makePhoneCall({
				    phoneNumber: this.csinfo.cs.manager_tel //仅为示例
				});
			},
			join_cs(e){
				if(this.userid.length<=0 || this.openid.length<=0){
					uni.showModal({
					    title: '登陆提示',
					    content: '您暂未登陆,是否马上登陆',
					    success: function (res) {
					        if (res.confirm) {
					           uni.navigateTo({
									url:"/pages/tennis/user/index"
					           })
					        } else if (res.cancel) {
					           
					        }
					    }
					});
				}else{
					uni.navigateTo({
						url:"/pages/tennis/club_soci/join_cs?csid="+this.csinfo.cs.id
					})
				}
				
			}
		}
	}
</script>

<style>

.screen-swiper{
	height: 320rpx !important;
}
.screen-swiper{
	min-height: 320rpx;
}

.csinfo{
	padding:20rpx;
	background-color: white;
	padding-bottom: 80rpx;
}
.csinfo-xhx{
	height: 3rpx;
	width: 100%;
	margin:15rpx 0rpx;
	background-color: #EBEEF5;
}

.info-jj{
	border-radius: 20rpx;
	border:1rpx solid #aaa5a5;
	height: 200rpx;
	width: 100%;
	padding:10rpx;
	margin:10rpx 0rpx;
	overflow: auto;
	word-break: break-all;
}
.info-text{
	margin-left: 20rpx;
	font-size: 28rpx;
	color: #000000;
}

.stillchekcu{
	float: right;
	color:#0081FF;
	right: 20rpx;
}
.btn-join{
	width: 100%;
	padding:0 40rpx;
	font-size: 30rpx;
}
</style>
